import React from 'react'
import "./TodoItem.css"
export default function TodoItem(props) {

    //解构
    let {item,deleteTodo,updateTodo} = props;

    //更新单个todo的选中
    let checkedDone = (id)=>{
        return (e)=>{
            // 调用 todolist 中的方法，更新 done 值
            updateTodo(id,e.target.checked);
        }
    }

    //删除todo
    let del = (id)=>{
        return ()=>{
            //调用todolist组件中的方法，删除数据
            if(window.confirm("确定删除吗？")){
                deleteTodo(id);
            }
           
        }
    }

    return (
        <li>
            <label>
                <input 
                    type="checkbox"  
                    checked={item.done} 
                    onChange={checkedDone(item.id)} 
                />
                <span> {item.title}</span>
            </label>
            <button className="btn btn-danger" onClick={del(item.id)} >删除</button>
        </li>
    )
}
